<template>
    <view class="content">
			<view class="conlist">
				<view  class="iptxt2">
					<span>评价</span> <u-rate :count="count"  v-model="value"></u-rate>
				</view>
			</view>
			<view class="conlist1">
				<view>评价内容</view>
				<view>
					<textarea v-model="info" maxlength="60" placeholder="请输入评价内容"></textarea>
					<view>{{info.length}}/60</view>
				</view>
			</view>
			<view class="listimg">
				<view v-for="(item,index) in pic" :key="index">
					<image :src="imgoss+item" mode="aspectFill"></image>
					<view @tap="scbtn(index)">X</view>
				</view>
				<view  @tap="chooseimage" v-if="pic.length<8">
					<image src="/static/scimg1.png" mode="aspectFill"></image>
				</view>
				<view  @tap="chooseimage1">
					<video v-if="videourl" :src="imgoss+videourl"></video>
					<image src="/static/scimg2.png" mode="aspectFill" v-else></image>
				</view>
			</view>
			<view class="btns">
				<view @tap="save" v-if="is_evaluate==0">提交</view>
				<view @tap="saves" v-if="is_evaluate==1">删除</view>
			</view>
			
			
		</view>
		
    </view>
</template>

<script>
const app = getApp();
var util = require('../../utils/util.js');
var encrypt = require('../../utils/api.js');
export default {
    data() {
        return {
			img_src: app.globalData.img_src,
			img_url: app.globalData.img_urls,
			imgoss: app.globalData.imgoss,
            id: 0,
			cur:9999,
			detail:null,
			info:'',
			count:5,
			value:0,
			pic:[],
			videourl:'',
			type:0,
			is_evaluate:0
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        var that = this;
		this.id = options.id
		this.type = options.type?options.type:0
		this.UserorderDes()
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
		saves(){
			var that = this;
			app.globalData.api.request('User/orderEvaluateDelete', {
				id:this.id,
			}, 'post', 'form').then((res) => {
				if (res.code == 0) {
					app.globalData.d('删除成功~')
				}else{
					app.globalData.show(res.msg)
				}
			});
		},
		UserorderDes(){
			var that = this;
			app.globalData.api.request('User/orderEvaluateInfo', {
				page:this.page,
				id:this.id,
			}, 'post', 'form').then((res) => {
				if (res.code == 0) {
					console.log(res.data)
					if(res.data){
						this.value = res.data.number
						this.pic = res.data.pic?res.data.pic:[]
						this.info = res.data.info
						this.videourl = res.data.video
						this.type = res.data.info==''?0:1
						this.is_evaluate = res.data.is_evaluate
					}else{
						this.type = 0
					}
				}else{
					app.globalData.show(res.msg)
				}
			});
		},
		save(){
			if(this.value==0){
				app.globalData.show('请选择几星~')
				return true
			}
			if(this.info==''){
				app.globalData.show('请输入评价内容~')
				return true
			}		
			const that =this;
			app.globalData.api.request('User/orderEvaluate', {
				id:this.id,
				number:this.value,
				pic:this.pic.join('|'),
				info:this.info,
				video:this.videourl,
			}, 'post', 'form').then((res) => {
				if (res.code == 0) {
					app.globalData.d('上传成功~')
				}else{
					app.globalData.show(res.msg)
				}
			});
		},
		// 上传图片
		chooseimage(){
		  var that = this
		  var url = this.img_url+'api/Upload/uploadpic'
		  util.chooseimage(url,'',function(res){
		    var data = res.data;
			console.log(data)
		    // data = encrypt.decryptAES(data.list,data.str)
			that.pic.push(data)
		    console.log(that.pic)
		  })
		  
		},
		// 上传视频
		chooseimage1(){
		  var that = this
		  var url = this.img_url+'api/Upload/uploadpic'
		  util.chooseimage1(url,'',function(res){
		    var data = res.data;
		    //console.log(data)
		    // data = encrypt.decryptAES(data.list,data.str)
			that.videourl = data
		  })
		  
		},
		scbtn(index){
			this.pic.splice(index,1)
		},
		onClose(){
			this.show1 = false
		},
		jump(url){
			uni.navigateTo({
				url:url
			})
		},
		swidths(cur){
			this.cur = cur
			this.show1 = false;
		}
	}
};
</script>
<style>
	.listimg>view>view{
		width: 20px;
		height: 20px;
		position: absolute;
		top:0px;
		right: 0px;
		background-color: red;
		text-align: center;
		line-height: 20px;
		font-size: 32rpx;
		color: #fff;
		z-index: 10;
	}
	.listimg>view{
		width: 151.25rpx;
		height: 151.25rpx;
		border-radius: 10rpx;
		position: relative;
		margin-right: 15rpx;
		margin-top: 15rpx;
		float: left;
	}
	.listimg>view:last-child{
		margin-right: 0px !important;
	}
	.listimg>view>image,.listimg>view>video{
		width: 151.25rpx;
		height: 151.25rpx;
		border-radius: 10rpx;
	}
	.listimg{
		width: 690rpx;
		height: auto;
		display: table;
		background-color: #fff;
		border-radius: 10rpx;
		margin:20rpx auto;
		box-sizing: border-box;
		padding: 20rpx;
	}
	.content{
		padding: 0px 30rpx;
	}
	.btns1>view:nth-child(1){
		width: 50%;
		height: 70rpx;
		float: left;
		text-align: center;
		line-height: 66rpx;
		box-sizing: border-box;
		background-color: rgba(255,255,255,1);
		color: rgba(134,101,175,1);
		font-size: 24rpx;
		text-align: center;
		font-family: Roboto;
		border: 2rpx solid rgba(134,101,175,1);
		border-top-left-radius: 5rpx;
		border-bottom-left-radius: 5rpx;
	}
	
	.btns1>view:nth-child(2){
		width: 50%;
		height: 70rpx;
		float: right;
		text-align: center;
		box-sizing: border-box;
		line-height: 66rpx;
		background-color: rgba(134,101,175,1);
		color: #fff;
		font-size: 24rpx;
		text-align: center;
		font-family: Roboto;
		border: 2rpx solid rgba(134,101,175,1);
		border-top-right-radius: 5rpx;
		border-bottom-right-radius: 5rpx;
	}
	.btns1{
		width: 100%;
		height: 70rpx;
		display: table;
		margin: 60rpx auto;
	}
	.zlist>view{
		width: 100%;
		height: auto;
		display: inline-flex;
		justify-content: space-between;
		padding: 20rpx 0px;
		position: relative;
		box-sizing: border-box;
		padding-right: 60rpx;
		border-bottom: 1px solid rgba(187,187,187,0.5);
	}
	.zlist>view:nth-child(1){
		color: rgb(16,16,16);
		font-size: 26rpx;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	.xzimg{
		width: 20px;
		height: 20px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 50%;
		right: 0px;
		margin-top: -10px;
	}
	.xzimg>image{
		width: 20px;
		height: 20px;
	}
	.zlist{
		width: 100%;
		height: auto;
		display: table;
	}
	.txts{
		width: 100%;
		height: auto;
		display: table;
		color: rgb(16,16,16);
		font-size: 28rpx;
		text-align: center;
		font-family: SourceHanSansSC-bold;
		line-height: 40px;
	}
	.phonecon{
		width: 100%;
		height: auto;
		display: table;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
	}
	.iptxt2{
		width: 100%;
		height:80rpx;
		display: inline-flex;
		align-items: center;
		color: rgb(0,0,0);
		font-size: 25rpx;
	}
	.btns>view:nth-child(1){
		width: 100%;
		height: 80rpx;
		float: right;
		text-align: center;
		line-height: 76rpx;
		border-radius: 10rpx;
		background-color: rgba(134,101,175,1);
		color: #fff;
		font-size: 24rpx;
		text-align: center;
		font-family: Roboto;
		border: 2rpx solid rgba(134,101,175,1);
	}
	.btns{
		width: 600rpx;
		height: 80rpx;
		display: table;
		margin: 60rpx auto;
	}
	.conlist1>view:nth-child(2){
		width: 100%;
		height: 200rpx;
		position: relative;
		margin-bottom: 20rpx;
	}
	.conlist1>view:nth-child(2)>textarea{
		width: 100%;
		height: 200rpx;
		border-radius: 10px;
		background-color: rgba(248,248,248,1);
		color: rgba(16,16,16,1);
		font-size: 14px;
		font-family: Roboto;
		box-sizing: border-box;
		padding: 20rpx;
	}
	.conlist1>view:nth-child(2)>view{
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		color: rgb(16,16,16);
		font-size: 24rpx;
		text-align: left;
		font-family: SourceHanSansSC-regular;
	}
	.conlist1>view:nth-child(1){
		color: rgb(0,0,0);
		font-size: 25rpx;
		text-align: left;
		font-family: PingFangSC-medium;
		width: 100%;
		line-height: 40px;
	}
	.conlist1{
		width: 100%;
		height: auto;
		display: table;
		margin-bottom: 10rpx;
		box-sizing: border-box;
		padding: 0px 24rpx;
		background-color: #fff;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
	}
	.iptxt>view:nth-child(2)>input{
		width: 300rpx;
		text-align: right;
		font-size: 24rpx;
		color: #333;
	}
	.iptxt>view:nth-child(1){
		width: auto;
		height: 94rpx;
		line-height: 94rpx;
		display: inline-block;
		float: left;
		color: rgb(0,0,0);
		font-size: 25rpx;
		text-align: left;
		font-family: PingFangSC-medium;
	}
	
	.iptxt>view:nth-child(2){
		width: auto;
		height: 94rpx;
		line-height: 94rpx;
		display: inline-flex;
		align-items: center;
		float: right;
	}
	.iptxt1{
		color: rgba(151,151,150,1);
		font-size: 25rpx;
		margin-right: 15rpx;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	.iptxt1>image{
		width: 28rpx;
	}
	.conlist{
		width: 100%;
		height: auto;
		display: table;
		box-sizing: border-box;
		padding: 0px 24rpx;
		background-color: #fff;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
	}
	.conlist>view{
		width: 100%;
		height: 94rpx;
		border-bottom: 1px solid rgba(245,245,245,0.5);
	}
	
	page{
		background-color: #f6f6f6;
	}
	.content {
		width: 100%;
		height: auto;
		display: table;
		box-sizing: border-box;
		padding-bottom: 140rpx;
		padding-top: 20rpx;
	}
</style>
